/**
 * Padding and margins attempt to match the offsets of the left-
 * and right-most visual elements in the main app toolbar.
 */
.toolbar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-left: 4pt;
  padding-right: 4pt;
}

.toolbar button {
  margin-top: 0;
  margin-bottom: 0;
}

#main-toolbar {
  background-color: #dcecef; /* light gray-blue */
}

.togglable-toolbar-holder {
  background-color: #eff6f8; /* light gray-blue */
  width: fit-content; /* set to 100% to span page */
  border: 1px solid;
  border-radius: 2pt;
  border-color: rgb(218, 220, 224);
  position: absolute;
}

#slice-toolbar-container {
  right: 0; /* remove to span page */
}

#status-group-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 4pt;
}

#button-holder-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  flex-grow: 2;
  margin: 4pt;
}

#primary-selection-status {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 4pt;
}

/**
 * For standalone MWC icons as buttons.
 * We don't use mwc-icon-button because this adds
 * a large backdrop and extra whitespace.
 */
mwc-icon.icon-button {
  height: 24px;
  width: 24px;
  min-width: 24px;
  --mdc-icon-size: 24px;
  cursor: pointer;
  user-select: none;
}

mwc-icon.icon-button:hover {
  opacity: .7;
}

mwc-icon.mdi-outlined {
  --mdc-icon-font: "Material Icons Outlined";
}

/* For in-line icons in a <span> */
[data-icon] {
  margin: 0;
}

[data-icon]:before {
  font-family: 'Material Icons';
  content: attr(data-icon);
  vertical-align: middle;
}

#favorite-button {
  margin-left: 5pt;
}

#legend-container {
  top: 100%;
  margin-left: -8pt; /* To account for button padding */
  cursor: default;
}
.legend-line {
  display: flex;
  align-items: center;
}
.legend-box{
  width: 10pt;
  height: 10pt;
  margin: 5px;
}
.legend-pixel {
  height: 10pt;
  width: 1px;
  border-bottom: 1px solid black;
}
.numeric-legend {
  display: flex;
}
.numeric-legend-holder {
  margin: 5px 30px;
}
.tick {
  width: 1;
  border-left: 1px solid black;
  height: 8pt;
}
.tick-legend {
  position: relative;
  height: 22px;
  width: fit-content;
}
.tick-label {
  font-size: 8pt;
  margin-left: -10px;
}
.color-dropdown {
  min-width: 150px;
}
.top-holder {
  display: flex;
}
.line-holder {
  padding-right: 20px;
}
